大家好,我是Karin。今天要來學習的內容是-解構賦值 Destructuring Assignment。
課程內容來自:彭彭的教學影片
https://www.youtube.com/watch?v=AMwRSPh2G3U&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=28
解構賦值是一個程式語法的技巧。先解構,再賦值。
先看一下傳統的方法
let arr=[3,4,5];
let d1=arr[0];
let d2=arr[1];
let d3=arr[2];
let arr=[3,4,5];
let[d1,d2,d3]=arr;
此時的d1,d2,d3會分別依序被帶入arr[0],arr[1],arr[2]的值。
let arr=[3,4,5];
let d1,d2,d3;
[d1,d2,d3]=arr;
let arr=[3,4];
let d1,d2,d3;
[d1,d2=3,d3=5]=arr;
此處執行後d1=3,d2=4,d3=5(d3未被賦值,維持預設值)。
先看一下傳統的方法
let obj={x:3,y:4};
let x=obj.x;
let y=obj.y;
let obj={x:3,y:4};
let {x,y}=obj;
變數會根據物件成員名稱做對應,x變數對應到物件中的x,y變數對應到物件中的y。
let obj={x:3,y:4};
let x,y;
({x,y}=obj);
記得此處若將宣告分開執行,最後一行賦值的部分要多加一個(),否則JS會無法執行。
let obj={x:3};
let x,y;
({x,y=5}=obj);
此處執行後x=3,y=5(y未被賦值,維持預設值)。
let obj={x:3,y:4};
let newX,newY;
({x:newX,y:newY}=obj);
此處執行後可得到newX=3,newY=4。
明天來練習解構賦值的操作及延伸應用,謝謝大家。